<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-us">
<head>
<script type='text/javascript' src='jquery-1.3.2.min.js'></script>
<script type='text/javascript' src='custom.js'></script>
<style type="text/css">
/*baseline css*/
html {
background:#EBEBEB none repeat scroll 0%;
height:100%;
font-family: "Lucida Console";
}

body, div, dl, dt, dd,  h1, h2, h3, h4, h5, h6, ul,li, pre, code, form, fieldset, legend, input, textarea, p, blockquote {
margin:0px;
padding:0px;

font-size:100%;
}


h1{
	font-size:1.8em;
	color:#000;
}
ul{
	font-size:.9em;
	color:#000;
}

ul.clean{
	list-style:none;
	padding:5px;
}

ul.clean li{
	padding:2px;
}

#header{
	background:#004175;	
	height:80px;
	
}
#header-content{
	margin-right:5%;
	margin-left:5%;
}
#header-content h1{
	color:#FDDC05;
}

#header h1 span{
	color:#fffccc;
	font-size:.5em;
}

#jsfconsole-content{

	margin-top:20px;
	margin-right:5%;
	margin-left:5%;
}

.content-left{
	float: left;
	width: 70%; /*Width of left column*/
	background:#fff;
	border:1px solid #CCC;
	padding:20px;
}

.content-right{	
	margin-left: 75%; 
}

.panelHeader{
	background:#EBEBEB; 
	padding:5px; 
	font-size:.8em; 
	font-weight:bold; 
	border:1px solid #CCC
}


h1.header{
	color:red;
	font-size:1.8em;
	margin-bottom:10px;
}


.panelDisplay{
	font-size:.9em;
	padding:5px; 
	height:300px;
	border:1px solid #CCC;
}
.panelHeader h1{
	font-size:1em;
}		

.sectionHeader{
	background:#fff; 
	padding:5px; 
	font-size:.6em; 
	font-weight:bold; 
	border:1px solid #CCC
}



.search-input{
		background:url(Search-16x16.png) 2px 2px  no-repeat;		
		padding:2px;							
		padding-left:18px;
		font-size:11px;
}		




ul.entries{
  position:absolute;
  list-style-type: none;
  margin:0px ;
  padding:0px;
 }
 
 ul.entries li{
   clear:both;
   padding:5px;
 }

 ul.entries span.label{
	float:left;
	width:140px;		
	line-height:15px;
 }
 
  ul.entries .marker{
   float:left;
   padding-left:5px;
   padding-right:5px;		
   font-weight:bold;
 }
 
 ul.entries .entry{
   padding:0;
   margin:0px;
   float:left;
  }

 
  ul.navigation {
	position:absolute;
	list-style:none;	
	top:53px;
  }
  
   ul.navigation li.active{
	float:left;	
	padding:5px;
	background:#EBEBEB;
	margin-left:5px;
	font-size:1.2em;
	font-weight:bold;
	color:#2DAA29;
  }
  
  ul.navigation li{
	float:left;	
	padding:5px;
	background:#246496;
	margin-left:5px;
	font-size:1.2em;
	font-weight:bold;
	color:#FFF;
	cursor:pointer;
  }
  

.jsfdump-scope-implicit{
 color:red;
}

.jsfdump-scope-application{
 color:blue;
}

.jsfdump-scope-request{
 color:black;
}


.jsfdump-scope-session{
 color:green;
}


/* sugesstion container */

.jsfdump-sugesstion{
	 position:absolute;	 
	 list-style:none;
	 padding:0px;
	 margin:0px;
	 width:100%;
}

.jsfdump-sugesstion-item{
	float:left;
	margin-right:10px;
}

/*Validation*/
ul.jsfconsole-validation{
background:#CCC;
 font-size:1em;
}

ul.jsfconsole-validation ul {
  list-style:none;
  background:#FFFFE0;
  font-size:.8em;
  padding-left:13px;
}
</style>

<!-- Console Styles and JS -->
<style type="text/css">
.jsfdump {
	font-size: 90%;
	font-weight: normal;
	font-family:Lucida Console,Arial,Sans-serif;
}

.jsfdump .box{
	padding:0px 3px 0px 3px;		
	border:1px solid #CBCBCB;
	margin-right:5px;
	text-decoration: none;
	color:#595959;
}


.jsfdump table {
	border-spacing:0px; 
}
 
.jsfdump dt {
  padding:0px;
  padding-left:0px;
  list-style:none;
	margin:0px;  
}

.jsfdump dd {
	font-weight: normal;
	color:#000;
	margin-left:1em;  
}

.jsfdump dl {
	margin:0px;  
}

.jsfdump .object{
	color:#B31709;
	font-weight:bold;	
}

.jsfdump .collection{
	color:#948D06;
	font-weight:bold;	
}

.jsfdump .array{
	color:#948D06;
}

.jsfdump  .array-index{
	color:#000;	
	font-weight:bold;		
	vertical-align: top;
}

.jsfdump .field{
	color:#595959;
}

.jsfdump .map{
	color:#D97D4A;
}


</style>
<script type="text/javascript">
function toggleCollectionView(owner){
	if(owner == null  || owner.childNodes == null){
		return null;
	}	
	var pa=owner.parentNode;
	while(pa.tagName.toUpperCase()!='DL'){
		pa=pa.parentNode;
	}	
	var foundNode=null;
	var cNodes=pa.childNodes;
	for(var i=0;i<cNodes.length;i++){
		var node=cNodes[i];
			if(node.nodeName.toUpperCase()=='DD'){	
				foundNode = node; 
				break;
			}
	}  	
	var visible=foundNode.style.display;
	if(visible==''){
		foundNode.style.display='none';
		owner.innerHTML="+";
	}else{
		foundNode.style.display='';
		owner.innerHTML="-";
	}
}

function focusRef(refId){
	var animateRef=function(obj){
		var style=obj.style;
		 var opacity=.0;
		 var tm=0;
		 var index=.1;
		 tm = setInterval(function(){
			if(index>10){
				style.backgroundColor="FFFFFF";
				clearInterval(tm);
				return;
			}
			//IE / FF support
			style.filter = 'alpha(opacity=' + opacity * 100 + ')';
			style.opacity = opacity;
			opacity+=.1;
			style.backgroundColor="FCFE6C";		
			index++;
		 }, 150);
	};

 var inputs=document.getElementsByTagName('TABLE');//ALWAYS USE CAPS
  for(var i=0;i<inputs.length;i++){
  	var tbl=inputs[i];
	var objRefId=tbl.getAttribute('objRefId');
	if(objRefId && objRefId==refId){
		var position=findPos(tbl);
		var container=findParentContainer(tbl);
		container.scrollTop=position[0];
		animateRef(tbl);
		/*
		var a=document.createElement("A");
		a.href="javascript:void(0);";
		a.innerHTML="Hello";
		tbl.appendChild(a);		
		*/
	}
  }	  
}

/*
 * Find main div container
 */
 function findParentContainer(owner) {
	var pa=owner.parentNode;
	while(pa.tagName.toUpperCase()!='DIV'){
		pa=pa.parentNode;
	}	
	return pa;
}

/*
 *Find component XY coordinates
 */
 function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
				curleft += obj.offsetLeft;
				curtop += obj.offsetTop;
	 
		} while (obj = obj.offsetParent);
    }
 	return [curleft,curtop];
}


</script>


</head> 
<body>
<div id="jsfconsole-wrapper">  
	<div id="header">
		<div id="header-content">
		   <h1>JSFConsole v .2  <span>untested and unreliable</span></h1>
		   <ul class="navigation" id="navigation-tabs">
				<li class="active" id="tab-info">Info</li>
				<li id="tab-console">Console</li>
				<li id="tab-bean">Bean Manager</li>
				<li id="tab-validation">Validation</li>
				<li id="tab-lifecycle">Lifecycle</li>
				<li id="tab-events">Event Log</li>
				<li id="tab-about">About</li>
		   </ul>
		   <div id="indicator" style="postion:relative; display:none; float:right;margin-right:auto;">
			  <img src="indicator.gif"/><span style="color:#fff">&nbsp;Processing...</span>
		   </div>
		</div>
		
	</div>
	
	
<div id="jsfconsole-content">

	
	<div id="tab-info-content" >
			<div class="content-left">
			<h1 class="header">Quick summary</h1>				
			<div class="panelHeader"><h1>Information</h1></div>
			<div class="panelDisplay">
				 <ul class="entries">
					<li><span class="label">JSF ver. </span><span class="marker">:</span> <span class="entry">JSF 1.20FB</span></li>
					<li><span class="label">Facelets ver.  </span><span class="marker">:</span> <span class="entry">1.5</span></li>
				</ul>
			</div>			
		</div><!--//content-left-->
		
		<div class="content-right">
				Content Right
		</div><!--//content-right-->
	
	</div><!--//tab-info-content-->
		
	<div id="tab-console-content"  style="display:none">

		<div class="content-left" style="height:550px;">
			<h1 class="header">Console</h1>		
			<div>
					<input type="text"	id="jsfdump-expression" name="jsfdump-expression" value="El Expression"	style="width:70%;"/> 									
				  <input type="button" name="jsfdump-eval"id="jsfdump-eval" value="Eval" style="width: 20%;margin-left:10px;"/>
			</div>
			<br/>
				<div class="panelHeader" style=" height:25px"><h1 style="float:left">Type EL expression in form ${exp} to evaluate </h1>
				<input type="text" value="search" class="search-input" style="width:30%; float:right;"/>
				</div>
				<div class="panelDisplay" id="console-panelDisplay" style="clear:both;height:420px; overflow:auto"> </div>
			
		</div><!--//content-right-->
		
		<div class="content-right">
				
		</div><!--//content-right-->
		
	</div><!--//tab-console-content-->

	<div id="tab-bean-content"  style="display:none">
			<div class="content-left">
				<h1 class="header">Bean Manager</h1>	
				
					<div class="panelDisplay" id="bean-container" style="height:420px; overflow: auto;clear:both;"> 
						Resolved Beans
					</div>
			</div>
				
			<div class="content-right">
				<div class="sectionHeader"><h1>Bean scope</h1></div>
			
				<form id="jsfdump-scopes-form">
				<ul class="clean">
					<li><input type="checkbox" name="jsfconsole-scopetype" id="jsfconsole-scopetype-implicit" value="implicit"/>
					<label for="jsfconsole-scopetype-implicit"  class="jsfdump-scope-implicit"> Implicit</label></li>

					<li><input type="checkbox" name="jsfconsole-scopetype" id="jsfconsole-scopetype-request" value="request"/>
					<label for="jsfconsole-scopetype-request" class="jsfdump-scope-request"> Request</label></li>

					<li><input type="checkbox" name="jsfconsole-scopetype" id="jsfconsole-scopetype-session" value="session"/>
					<label for="jsfconsole-scopetype-session" class="jsfdump-scope-session">Session</label></li>

					<li><input type="checkbox" name="jsfconsole-scopetype" id="jsfconsole-scopetype-application" value="application"/>
					<label for="jsfconsole-scopetype-application" class="jsfdump-scope-application"> Application </label></li>
				</ul>					
					
				</form>
			</div><!--//content-right-->
	</div>
	
	<div id="tab-validation-content"  style="display:none">
		<div class="content-left">
			<h1 class="header">Validation</h1>
			
			<div style="float:right;">
 			  <a href="javascript:void(0);" onclick="validationView('expanded')">Expanded view </a> | <a href="javascript:void(0);" onclick="validationView('compact')"> Compact view </a>
			</div>
				
			 	
				
			<div class="panelDisplay" id="console-validation" style="height:420px; overflow: auto;clear:both"> 
				Awaiting update...
			</div>
		</div>			
	</div><!--//tab-validation-content-->
	
	<div id="tab-lifecycle-content"  style="display:none">
			<div class="content-left">
				<h1 class="header">Lifecycle monitoring</h1>	
				 <div style="float:right;">
					<a href="javascript:void(0);" onclick="lifecycleView('expanded')">Expanded view </a> | <a href="javascript:void(0);" onclick="lifecycleView('compact')"> Compacted view </a></div>
					<div class="panelDisplay" id="lifecycle-container" style="height:420px; overflow: auto;clear:both;"> 
						SOME Text about the lifecycle
					</div>
						
					 <div id="element">
					   <img id ="jsfdump-phase-graph" src="" alt="Lifecycle graph"/>
					 </div>
					  
				<!--
				  	<div id="lifecycle-container" style="padding:5px; height: 255px; overflow: auto">	  
					
					</div>
				 <div id="element">
				   <img id ="jsfdump-phase-graph" src="" alt="Lifecycle graph"/>
				 </div>
				-->
				
			</div>	
		
			
			<div class="content-right">
				<div class="sectionHeader"><h1>Settings</h1></div>
					
				 <ul class="entries">
					<li><span class="label">Update every</span><span class="marker">:</span> <div class="entry"><select id="jsfdump-lifecycle-interval">
						<option value="5">5 Seconds</option>
						<option value="10">10 Seconds</option> 
						<option value="15">15 Seconds</option>
						<option value="20">20 Seconds</option>
					</select></div></li>
					<li><span class="label">Results </span><span class="marker">:</span> 
						<div class="entry">
							<select id="jsfdump-lifecycle-resulsts">
								<option value="-1">ALL</option>
								<option value="10">10 </option>
								<option value="20">20 </option>
								<option value="30">30 </option>
								<option value="40">40 </option>
								<option value="50">50 </option>
							</select>
						
						</div>
					</li>
				</ul>
				
				<br/>	<br/>	<br/>
					
					<input type="button" 	id="jsfdump-lifecycle-monitor" value="Start Monitoring" style="width: 140px"/>
						<br/>
					<br />	<br />
					<div class="sectionHeader"><h1>Request filter</h1></div>
					<br />
					<input type="text"	id="jsfdump-lifecycle-filter"  value=""	style="width: 100%"/>
					
					
			</div><!--//content-right-->
					
	</div>

	
	<div id="tab-events-content" style="display:none">
	  <div class="content-left">
			<h1 class="header">Event Log</h1>
			
			<div class="panelHeader"><h1>Request event</h1></div>
			<div class="panelDisplay" id="console-eventlog" style="height:420px; overflow: auto;clear:both"> 
			
			</div>
				
      </div>
	  
	   <div class="content-right">
			<div class="sectionHeader"><h1>Last 50 requests</h1></div>
			<div class="panelDisplay" id="console-eventlog-request" style="height:500px; overflow: auto;"> 
			
			</div>
      </div>
	  
	</div><!--//tab-events-content-->
	
	
	<div id="tab-about-content" style="display:none">
			<div class="content-left">
				<h1 class="header">About</h1>	
				<p>Developed by <a href="http://www.gregbugaj.com">Greg Bugaj</a> to help me work with jsf apps.</p>
			</div>
	</div><!--//tab-about-content-->

	

</div><!--//jsfconsole-content-->
	
	
</div>

<!-- Suggestion EL expression -->
<div id="jsfdump-suggestion" style="position:absolute; display:none; top:0; left:0;">
	<div id="jsfdump-suggestion-content" style="position:relative;border:1px solid #ccc; background:#FFFFE0; width:100%;height:100px; overflow-y:auto;">Content</div>
</div>

</body>
</html>


